<template>
	<view class="video-device-form">
		<!-- 		<view class="header">
			<text class="header-title">参数配置</text>
		</view> -->

		<!-- 平台配置信息 -->
		<view class="plat-info-container">
			<view class="form-header">
				<view class="flex-alin">
					<text class="header-text">平台配置信息</text>
				</view>
			</view>
			<view class="video-device-info">
				<uni-forms ref="plateForm" :modelValue="plateformData" :rules="plateRules">
					<!-- 物管平台IP -->
					<uni-forms-item label="物管平台IP" required name="platformIP" class="info-item" label-width='110px'>
						<uni-easyinput :clearable="false" v-model="plateformData.platformIP" placeholder="请输入物管平台IP"
							class="input-field" />
					</uni-forms-item>
					<!-- 物管平台端口 -->
					<uni-forms-item label="物管平台端口" required name="platformPort" class="info-item" label-width='110px'>
						<uni-easyinput :clearable="false" v-model="plateformData.platformPort" placeholder="请输入物管平台端口"
							class="input-field" />
					</uni-forms-item>
					<!-- 视频平台IP -->
					<uni-forms-item label="视频平台IP" required name="platformVideoIP" class="info-item"
						label-width='110px'>
						<uni-easyinput :clearable="false" v-model="plateformData.platformVideoIP"
							placeholder="请输入视频平台IP" class="input-field" />
					</uni-forms-item>
					<!-- 视频平台端口 -->
					<uni-forms-item label="视频平台端口" required name="platformVideoPort" class="info-item"
						label-width='110px'>
						<uni-easyinput :clearable="false" v-model="plateformData.platformVideoPort"
							placeholder="请输入视频平台端口" class="input-field" />
					</uni-forms-item>
					<!-- 视频平台编码 -->
					<uni-forms-item label="视频平台编码" required name="platformVideoCode" class="info-item"
						label-width='110px'>
						<uni-easyinput :clearable="false" v-model="plateformData.platformVideoCode"
							placeholder="请输入视频平台编码" class="input-field" />
					</uni-forms-item>
					<!-- 视频平台密码 -->
					<uni-forms-item label="视频平台密码" required name="platformVideoPassword" class="info-item"
						label-width='110px'>
						<uni-easyinput :clearable="false" v-model="plateformData.platformVideoPassword"
							placeholder="请输入视频平台密码" class="input-field" />
					</uni-forms-item>
				</uni-forms>
			</view>
			<view class="button-bar">
				<button type="primary" class="save-btn" @click="savePlatform()">
					<view class="icon-container">
						<image src="../../static/check.png" style="width: 20px; " mode="" class="icon"></image>
					</view>保存设置
				</button>
			</view>
		</view>

		<view class="plat-info-container">
			<view class="form-header">
				<view class="flex-alin">
					<text class="header-text">厂家信息</text>
				</view>
			</view>

			<view class="video-device-info">
				<uni-forms>
					<view class="form-row">
						<!-- 厂家 -->
						<uni-forms-item label="厂家" required name="platformIP" class="info-item" label-width=60>
							<uni-data-select @change="selectManufactury" :clear="false" v-model="manufactury"
								:localdata="manuOptions" placeholder="请选择厂家" />
						</uni-forms-item>
						<uni-forms-item class="info-item">
							<view class="header-button-small">
								<button type="primary" class="header-btn" @click="goToManuFacturers()">
									<view class="icon-container">
										<image src="../../static/build.png" mode="" class="icon"></image>
									</view>厂家管理
								</button>
							</view>
						</uni-forms-item>

					</view>


				</uni-forms>
			</view>
			<!-- <view class="video-device-info">
				<view class="info-item">
					<text class="label">厂家:</text>
					<uni-data-select @change="selectManufactury" :clear="false" v-model="manufactury"
						:localdata="manuOptions" />


				</view>
				<view class="header-button-small">
					<button type="primary" class="header-btn" @click="goToManuFacturers()">
						<view class="icon-container">
							<image src="../../static/build.png" mode="" class="icon"></image>
						</view>厂家管理
					</button>
				</view>
			</view> -->
		</view>



		<!-- 网关设备信息1 -->
		<view class="plat-info-container">
			<view class="form-header">
				<view class="flex-alin">
					<text class="header-text">网关设备信息</text>
				</view>
			</view>

			<view class="video-device-info">
				<uni-forms ref="stationForm" :modelValue="formData" :rules="formRules">
					<view class="form-row">
						<!-- IP -->
						<uni-forms-item label="IP" required name="gatewayIP" class="info-item">
							<uni-easyinput v-model="formData.gatewayIP" placeholder="请输入IP" />
						</uni-forms-item>

						<!-- 端口 -->
						<uni-forms-item label="端口" required name="gatewayPort" class="info-item">
							<uni-easyinput v-model="formData.gatewayPort" placeholder="请输入端口" />
						</uni-forms-item>
					</view>

					<view class="form-row">
						<!-- 用户名 -->
						<uni-forms-item label="用户名" required name="gatewayUsername" class="info-item">
							<uni-easyinput v-model="formData.gatewayUsername" placeholder="请输入用户名" />
						</uni-forms-item>

						<!-- 密码 -->
						<uni-forms-item label="密码" required name="gatewayPassword" class="info-item">
							<uni-easyinput v-model="formData.gatewayPassword" placeholder="请输入密码" />
						</uni-forms-item>
					</view>
				</uni-forms>
			</view>
		</view>

		<!-- 视频设备默认信息 -->
		<view class="plat-info-container">
			<view class="form-header">
				<view class="flex-alin">
					<text class="header-text">视频设备默认信息</text>
				</view>
			</view>
			<view class="video-device-info">
				<uni-forms ref="videoForm" :modelValue="videoFormData" :rules="videoRules">
					<view class="form-row">
						<!-- 用户名 -->
						<uni-forms-item label="用户名" required name="videoUsername" class="info-item">
							<uni-easyinput v-model="videoFormData.videoUsername" placeholder="请输入用户名" />
						</uni-forms-item>

						<!-- 密码 -->
						<uni-forms-item label="密码" required name="videoPassword" class="info-item">
							<uni-easyinput v-model="videoFormData.videoPassword" placeholder="请输入密码" />
						</uni-forms-item>
					</view>

					<view class="form-row">
						<!-- 端口 -->
						<uni-forms-item label="端口" required name="videoPort" class="info-item">
							<uni-easyinput v-model="videoFormData.videoPort" placeholder="请输入端口" />
						</uni-forms-item>

						<!-- 视频编码 -->
						<uni-forms-item label="视频编码" required name="compression" class="info-item" label-width=60>
							<uni-data-select :clear="false" v-model="videoFormData.compression" :localdata="option1"
								placeholder="请选择视频编码" />
						</uni-forms-item>
					</view>

					<view class="form-row">
						<!-- 分辨率 -->
						<uni-forms-item label="分辨率" required name="resolution" class="info-item">
							<uni-data-select :clear="false" v-model="videoFormData.resolution" :localdata="option2"
								placeholder="请选择分辨率" />
						</uni-forms-item>

						<!-- 码率上限 -->
						<uni-forms-item label="码率上限" required name="bitRate" class="info-item" label-width=60>
							<uni-data-select :clear="false" v-model="videoFormData.bitRate" :localdata="option3"
								placeholder="请选择码率上限" />
						</uni-forms-item>
					</view>

					<view class="form-row-last">
						<!-- 视频帧率 -->
						<uni-forms-item label="视频帧率" required name="fps" class="info-item" label-width=60>
							<uni-data-select :clear="false" v-model="videoFormData.fps" :localdata="option4"
								placeholder="请选择视频帧率" />
						</uni-forms-item>
					</view>

				</uni-forms>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="button-bar">
			<button type="primary" class="save-btn" @click="save()">
				<view class="icon-container">
					<image src="../../static/check.png" style="width: 20px; " mode="" class="icon"></image>
				</view>保存设置
			</button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		onMounted,
		reactive,
		ref
	} from 'vue';
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import {
		changeData,
		getJsonData
	} from '../../js_sdk/file';

	const manuOptions = ref([])
	const manus = ref([])
	const stationForm = ref([])
	const videoForm = ref([])
	const manufactury = ref()
	const plateForm = ref()
	const defaultInfo = ref([])
	const hasSelected = ref('0')
	const option1 = ref([{
		text: 'H.264',
		value: 'H.264'
	},
	{
		text: 'H.265',
		value: 'H.2645'
	}
	])

	const option2 = ref([{
		text: '352*288',
		value: 4
	},
	{
		text: '704*576',
		value: 1
	},

	{
		text: '640*480',
		value: 6
	},

	{
		text: '1280*720',
		value: 200
	},

	{
		text: '1280*960',
		value: 201
	},
	{
		text: '1920*1080',
		value: 202
	}
	])

	const option3 = ref([
		{ value: 16, text: "16kB" },
		{ value: 32, text: "32kB" },
		{ value: 64, text: "64kB" },
		{ value: 128, text: "128kB" },
		{ value: 192, text: "192kB" },
		{ value: 256, text: "256kB" },
		{ value: 320, text: "320kB" },
		{ value: 512, text: "512kB" },
		{ value: 1024, text: "1024kB" },
		{ value: 1536, text: "1536kB" },
		{ value: 2048, text: "2048kB" },
		{ value: 3072, text: "3072kB" },
		{ value: 4096, text: "4096kB" },
	])

	const option4 = ref([
		{ value: 1, text: "1fps" },
		{ value: 2, text: "2fps" },
		{ value: 3, text: "3fps" },
		{ value: 4, text: "4fps" },
		{ value: 5, text: "5fps" },
		{ value: 6, text: "6fps" },
		{ value: 7, text: "7fps" },
		{ value: 8, text: "8fps" },
		{ value: 9, text: "9fps" },
		{ value: 10, text: "10fps" },
		{ value: 12, text: "12fps" },
		{ value: 15, text: "15fps" },
		{ value: 16, text: "16fps" },
		{ value: 18, text: "18fps" },
		{ value: 20, text: "20fps" },
		{ value: 22, text: "22fps" },
		{ value: 24, text: "24fps" },
		{ value: 25, text: "25fps" },
	])

	// 平台配置信息
	let plateformData = ref({
		platformIP: '',
		platformPort: '',
		platformVideoIP: '',
		platformVideoPort: '',
		platformVideoCode: '',
		platformVideoPassword: '',
	})
	// 校验规则
	const plateRules = {
		platformIP: {
			rules: [{
				required: true,
				errorMessage: '物管平台IP不能为空'
			}, {
				validateFunction: function (rule, value, data, callback) {
					let reg = /^((2((5[0-5])|([0-4]\d)))|([0-1]?\d{1,2}))(\.((2((5[0-5])|([0-4]\d)))|([0-1]?\d{1,2}))){3}$/
					if (reg.test(value)) {
						return true
					} else {
						callback('ip地址格式错误')
					}
				}
			}]
		},
		platformPort: {
			rules: [{
				required: true,
				errorMessage: '物管平台端口不能为空'
			}, {
				validateFunction: function (rule, value, data, callback) {
					let reg = /^([0-9]{1,4}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5])$/
					if (reg.test(value)) {
						return true
					} else {
						callback('端口格式错误')
					}
				}
			}]
		},
		platformVideoIP: {
			rules: [{
				required: true,
				errorMessage: '视频平台IP不能为空'
			}, {
				validateFunction: function (rule, value, data, callback) {
					let reg = /^((2((5[0-5])|([0-4]\d)))|([0-1]?\d{1,2}))(\.((2((5[0-5])|([0-4]\d)))|([0-1]?\d{1,2}))){3}$/
					if (reg.test(value)) {
						return true
					} else {
						callback('ip地址格式错误')
					}
				}
			}]
		},
		platformVideoPort: {
			rules: [{
				required: true,
				errorMessage: '视频平台端口不能为空'
			}, {
				validateFunction: function (rule, value, data, callback) {
					let reg = /^([0-9]{1,4}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5])$/
					if (reg.test(value)) {
						return true
					} else {
						callback('端口格式错误')
					}
				}
			}]
		},
		platformVideoCode: {
			rules: [{
				required: true,
				errorMessage: '视频平台编码不能为空'
			}]
		},
		platformVideoPassword: {
			rules: [{
				required: true,
				errorMessage: '视频平台密码不能为空'
			}]
		},

	}


	// 网关设备信息
	let formData = ref({
		gatewayIP: '',
		gatewayPort: '',
		gatewayUsername: '',
		gatewayPassword: '',
	})

	// 校验规则
	const formRules = {
		gatewayIP: {
			rules: [{
				required: true,
				errorMessage: 'IP不能为空'
			}, {
				validateFunction: function (rule, value, data, callback) {
					let reg = /^((2((5[0-5])|([0-4]\d)))|([0-1]?\d{1,2}))(\.((2((5[0-5])|([0-4]\d)))|([0-1]?\d{1,2}))){3}$/
					if (reg.test(value)) {
						return true
					} else {
						callback('ip地址格式错误')
					}
				}
			}]
		},
		gatewayPort: {
			rules: [{
				required: true,
				errorMessage: '端口不能为空'
			}, {
				validateFunction: function (rule, value, data, callback) {
					let reg = /^([0-9]{1,4}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5])$/
					if (reg.test(value)) {
						return true
					} else {
						callback('端口格式错误')
					}
				}
			}]
		},
		gatewayUsername: {
			rules: [{
				required: true,
				errorMessage: '用户名不能为空'
			}]
		},
		gatewayPassword: {
			rules: [{
				required: true,
				errorMessage: '密码不能为空'
			}]
		},

	}

	// 视频设备默认信息
	let videoFormData = ref({
		videoUsername: '',
		videoPassword: '',
		videoPort: '',
		compression: '',
		resolution: '',
		bitRate: '',
		fps: ''
	})
	const videoRules = {
		videoUsername: {
			rules: [{
				required: true,
				errorMessage: '用户名不能为空'
			}]
		},
		videoPassword: {
			rules: [{
				required: true,
				errorMessage: '密码不能为空'
			}]
		},
		videoPort: {
			rules: [{
				required: true,
				errorMessage: '端口不能为空'
			}, {
				validateFunction: function (rule, value, data, callback) {
					let reg = /^([0-9]{1,4}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5])$/
					if (reg.test(value)) {
						return true
					} else {
						callback('端口格式错误')
					}
				}
			}]
		},
		compression: {
			rules: [{
				required: true,
				errorMessage: '视频编码不能为空'
			}]
		},
		resolution: {
			rules: [{
				required: true,
				errorMessage: '分辨率不能为空'
			}]
		},
		bitRate: {
			rules: [{
				required: true,
				errorMessage: '码率上限不能为空'
			}]
		},
		fps: {
			rules: [{
				required: true,
				errorMessage: '视频帧率不能为空'
			}]
		},
	}


	onShow(async () => {
		manuOptions.value = []
		formData.value.gatewayIP = ''
		formData.value.gatewayPort = ''
		formData.value.gatewayUsername = ''
		formData.value.gatewayPassword = ''
		videoFormData.value.videoUsername = ''
		videoFormData.value.videoPassword = ''
		videoFormData.value.videoPort = ''
		videoFormData.value.compression = ''
		videoFormData.value.resolution = ''
		videoFormData.value.bitRate = ''
		videoFormData.value.fps = ''
		manufactury.value = ''

		let filePath = '_doc/test/manufacturers.json'
		let dataJson = await getJsonData(filePath)
		if (dataJson === '') {
		} else {
			defaultInfo.value = JSON.parse(dataJson);
			for (let i = 0; i < defaultInfo.value.length; i++) {
				let option = {
					text: defaultInfo.value[i].manufacturersName,
					value: defaultInfo.value[i].manufacturersName
				}
				manuOptions.value.push(option)
			}
		}

		let filePath2 = '_doc/test/platform.json'
		let dataJson2 = await getJsonData(filePath2)
		if (dataJson2 === '') {
		} else {
			plateformData.value = JSON.parse(dataJson2);
		}
	})

	const initForm = () => {
	}
	//选择
	const selectManufactury = async () => {
		let target = defaultInfo.value.filter((e) => {
			return e.manufacturersName === manufactury.value
		})
		//回显
		if (target[0].gatewayData !== undefined && target[0].videoData !== undefined) {
			formData.value.gatewayIP = target[0].gatewayData.gatewayIP
			formData.value.gatewayPort = target[0].gatewayData.gatewayPort
			formData.value.gatewayUsername = target[0].gatewayData.gatewayUsername
			formData.value.gatewayPassword = target[0].gatewayData.gatewayPassword
			videoFormData.value.videoUsername = target[0].videoData.videoUsername
			videoFormData.value.videoPassword = target[0].videoData.videoPassword
			videoFormData.value.videoPort = target[0].videoData.videoPort
			videoFormData.value.compression = target[0].videoData.compression
			videoFormData.value.resolution = target[0].videoData.resolution
			videoFormData.value.bitRate = target[0].videoData.bitRate
			videoFormData.value.fps = target[0].videoData.fps
		} else {
			// console.log('进入这里');
			formData.value.gatewayIP = ''
			formData.value.gatewayPort = ''
			formData.value.gatewayUsername = ''
			formData.value.gatewayPassword = ''
			videoFormData.value.videoUsername = ''
			videoFormData.value.videoPassword = ''
			videoFormData.value.videoPort = ''
			videoFormData.value.compression = ''
			videoFormData.value.resolution = ''
			videoFormData.value.bitRate = ''
			videoFormData.value.fps = ''
		}
		hasSelected.value = '1'
	}


	const goToManuFacturers = () => {
		uni.navigateTo({
			url: '/pages/manufacturers/manufacturers'
		})
	}

	// 保存
	const save = async () => {
		//两个表单校验
		let filePath = '_doc/test/manufacturers.json';
		if (hasSelected.value !== '1') {
			uni.showToast({
				title: '请选择厂家',
				icon: 'error'
			});
		}
		else {
			const valid1 = await stationForm.value.validate();
			const valid2 = await videoForm.value.validate();
			if (valid1) {
			}
			if (valid2) {
			}

			for (let i = 0; i < defaultInfo.value.length; i++) {
				if (defaultInfo.value[i].manufacturersName === manufactury.value) {
					defaultInfo.value[i].gatewayData = formData.value
					defaultInfo.value[i].videoData = videoFormData.value
				} else {
					continue
				}
			}
			const change = await changeData(filePath, 0, defaultInfo.value);

			//查询当前绑定了该厂家的站房 更新配置
			let stationPath = '_doc/test/station.json'
			let stationJson = await getJsonData(stationPath)
			if (stationJson === '') {
			} else {
				let stationList = JSON.parse(stationJson);
				for (let i = 0; i < stationList.length; i++) {
					if (stationList[i].manufacturersName === manufactury.value) {
						stationList[i].gatewayData = formData.value
						stationList[i].videoData = videoFormData.value
					}
				}

				const change = await changeData(stationPath, 0, stationList);
			}


			let dataJson = await getJsonData(filePath)
			if (dataJson === '') {
			} else {
				defaultInfo.value = JSON.parse(dataJson);
			}
			uni.showToast({
				title: '保存成功',
				icon: 'success',
				duration: 1500
			});
		}

	};

	const savePlatform = async () => {
		let filePath = '_doc/test/platform.json';
		const valid = await plateForm.value.validate();
		if (valid) {
			const change = await changeData(filePath, 0, plateformData.value);
			uni.showToast({
				title: '保存成功',
				icon: 'success'
			});
		}
	}
</script>

<style>
	.flex-alin {
		display: flex;
		align-items: center;
	}

	/* 基本样式 */
	.video-device-form {
		padding: 20px;
		background-color: #f7f7f7;
		height: 100%;

	}

	.header {
		/* border: 1px solid red; */
		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: 20px;
		position: relative;
	}

	.form-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.header-text {
		font-size: 18px;
		color: #666;
	}

	.header-tag {
		margin-left: 20px;
	}

	.header-button-small {
		/* border: 1px solid red; */
		width: 150px;
	}

	.header-btn {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 16px;
		background-color: #48b0b1 !important;
		/* color: white; */
		padding: 0 20px;
		border-radius: 4px;
	}

	/* 	.header-btn {
		
		font-size: 16px;
		background-color: #48b0b1 !important;
		color: white;
		padding: 0 20px;
		border-radius: 4px;
	} */

	.icon-container {
		width: 20px;
		height: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 10px;
	}

	.icon {
		width: 100%;
		height: 100%;
	}

	.header-title {
		font-size: 24px;
		color: #666;
	}

	.plat-info-container {
		/* margin-top: 20px; */
		background-color: #fff;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		border-radius: 8px;
		padding: 20px;
		margin-bottom: 20px;
	}

	.video-device-info {
		width: 100%;
		margin-top: 15px;
		/* padding: 15px; */
	}

	.form-row {
		/* margin-top: 20px; */
		display: flex;
		justify-content: space-between;
		/* margin: 10px 0; */
	}

	.form-row-last {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}

	.info-item {
		flex: 1;
		margin-right: 10px;
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

	.input-field {
		flex: 1 1 auto;
		width: 100%;
	}


	.uni-select__input-placeholder {
		font-size: 12px !important;
		color: #999 !important;
	}




	.label {
		font-size: 14px;
		color: #666;
		width: 88px;
		text-align: right;
		flex-shrink: 0;
		/* padding-right: 10px; */
	}

	.input {
		padding: 8px;
		border: 1px solid #ddd;
		border-radius: 4px;
		font-size: 18px;

	}

	.button-bar {
		/* position: fixed;
		bottom: 0;
		left: 0;
		right: 0; */
		display: flex;
		border-radius: 4px;
		font-size: 16px;
		padding: 20px;
		z-index: 1000;
	}

	.save-btn {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 30px;
		background-color: #07c160 !important;
		font-size: 16px;
	}

	.form-row-noflex {
		/* width: 75%; */
	}
</style>